<template>
  <div>
      <el-table :data="comments">
        <el-table-column>
          <template slot-scope="scope">
            <div class="c-list">
              <div>
                <el-tag type='info' size="small" effect='plain'>会员</el-tag>
                {{scope.row.username}} 评论了你的文章 【{{scope.row.articleTitle}}】
              </div>
              <div>
                {{scope.row.createTime}}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev,pager,next"
        :total="count"
        :page-size="pageSize"
        :current-page="page"
        @current-change="changePage"
      >

      </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments:[],
      page:1,
      pageSize:0,
      count:0
    }
  },
  methods: {
    getData(){
      this.$http({
        path:"/comment/findUser",
        method:"get",
        params:{
          params:{
            author:this.$store.state.user.username,
            page:this.page
          }
        }
      }).then(res=>{
        this.comments = res? res.data : [];
        this.page = res ? res.page : 1;
        this.pageSize = res ? res.pageSize : 0;
        this.count = res ? res.comCount : 0;
      })
    },
    changePage(page){
      this.page = page
      this.getData()
    },
  },
  created() {
    this.getData()
  },
}
</script>

<style>
  .c-list{
    display: flex;
    justify-content: space-between;
  }
</style>